<template>
  <div class="path-index container">
    <Header>
      <slot>
        <span v-if="pathStatus">添加地址</span>
        <span v-else>编辑地址</span>
      </slot>
    </Header>
    <section>
      <van-address-edit
        v-if="pathStatus"
        :area-list="areaList"
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />

      <van-address-edit
        v-else
        :address-info="AddressInfo"
        :area-list="areaList"
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onUpdate"
        @delete="onDelete"
      />
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/path/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import http from '@/common/api/request';
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  components: { Header, Tabbar },
  data() {
    return {
      pathStatus:false,
      areaList,
      AddressInfo:{},
      searchResult: [],
    };
  },
  mounted () {
    let key = JSON.parse(this.$route.params.key);
    // 是通过添加进来的
    if( key == 'add' ){
      this.pathStatus = true;
    }else{//编辑进来的
      this.AddressInfo = key;
      this.AddressInfo.areaCode = key.areaCode;
      this.AddressInfo.isDefault = this.AddressInfo.isDefault == 1 ? true : false;
    }
  },
  methods: {
    //点击保存触发==》新增
    onSave(content) {
      content.isDefault = content.isDefault ==true ? 1 :0;
        http.$axios({
          url: "/api/addAddress",
          method: "post",
          headers:   {
            token: true,
          },
          data: {
            ...content,
          },
        })
        .then((res) => {
          if (!res.success) return;
          Toast(res.msg);
          this.$router.replace('/path')
        });
    },
    //点击保存触发==》修改
    onUpdate( content ) {
      content.isDefault = content.isDefault ==true ? 1 :0;
      http.$axios({
        url: "/api/updateAddress",
        method: "post",
        headers:   {
          token: true,
        },
        data: {
          ...content,
        },
      })
      .then((res) => {
        if (!res.success) return;
        Toast(res.msg);
        this.$router.replace('/path')
      });
    },
    //点击删除
    onDelete(content) {
      http.$axios({
        url: "/api/deleteAddress",
        method: "post",
        headers:   {
          token: true,
        },
        data: {
          id:content.id,
        },
      })
      .then((res) => {
        if (!res.success) return;
        Toast(res.msg);
        this.$router.replace('/path')
      });
    },
  },
};
</script>

<style lang="scss" scoped>
section {
  background-color: #f7f7f7;
  .van-address-edit {
    padding: 0;
  }
  ::v-deep .van-button--danger{
    width: 8rem;
    height: 1.0667rem;
    margin: 0 auto;
    background-color: #b0352f;
    border: 1px solid #b0352f;
  }
  ::v-deep .van-button--default{
    width: 8rem;
    height: 1.0667rem;
    margin: .2667rem auto 0;

  }
}
::v-deep .tabbar {
  border-top: 2px solid #ccc;
}
</style>
